<template>
	<div class="body">
		<div class="header">
			<!-- <div class="top">
				<img @click="returnGo" src="../assets/homeimg/滑动左.png" />
				<span>学习报告</span>
			</div> -->
			<div class="myport">
				<div class="port-left">
					<span class="tit">我的学习报告</span>
					<p class="num">学号：{{obj.study_num || '0'}}</p>
				</div>
				<div class="port-right">
					<!-- <img :src="obj.avator" alt class="avator" /> -->
					<img :src="avator" alt class="avator" />
				</div>
			</div>
			<div class="card">
				<div class="card-c">
					<div class="kc">
						<span class="kc-t">学习课程</span>
						<span class="title">{{obj.title}}</span>
					</div>
					<div class="kc">
						<span class="kc-t">报告日期</span>
						<span class="title">{{obj.createtime}}</span>
					</div>
					<div class="dtclock">
						<div class="xxts">
							<img src="../assets/homeimg/学习天数.png" />
							<span>{{obj.study_days || '0'}}</span>
							<span>学习天数</span>
						</div>
						<div class="xxts">
							<img src="../assets/homeimg/打卡天数.png" />
							<span>{{obj.sign_days || '0'}}</span>
							<span>打卡天数</span>
						</div>
					</div>
				</div>
			</div>
			<div class="task">
				<div class="task-text">
					<p>今日任务完成情况</p>
					<p>每天30分钟，总结学习情况</p>
				</div>
				<div class="echart"></div>
			</div>
			<p class="all">已有25+学员加入学习计划，学习效率翻倍~</p>
			<div class="btn" @click="share">分享好友</div>
		</div>
	</div>
</template>

<script>
	import fuxiApi from "@/api/fuxi";
	export default {
		data() {
			return {
				avator: require("../assets/homeimg/头像 (1).png"),
				obj: {},
				token: '',
				id: ''
			};
		},
		components: {},
		created() {
			// if (localStorage.getItem("user")) {
			// 	var info = JSON.parse(localStorage.getItem("user"));
			// }
			// this.token = info.token;
			// this.id = info.id;
			if(this.$route.query.token){
				this.$store.commit('SAVE_TOKEN',this.$route.query.token)
			}
			this.id = this.$route.query.id;
			this.getUserInfo();
			this.getreportInfo();
		},
		methods: {
			returnGo() {
				// this.$router.go(-1);
				window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
			},
			getUserInfo(){
				this.$http.post('/api/user/userInfo').then(res => {
					// console.log(res)
					this.avator = res.data.avatar
				})
			},
			getreportInfo() {
				this.$http.post('/api/collect/reportInfo',{id:this.id}).then(res => {
					this.obj = res.data;
				})
				// fuxiApi.reportInfo({
				// 	token: this.token,
				// 	id: this.id
				// }).then(res => {
				// 	console.log(res);
				// 	this.obj = res.data;
				// })
			},
			share() {
				window.h5_android && window.h5_android.shareWx();
				window.webkit.messageHandlers.shareToWeixin_js_oc.postMessage([])
			}
		}
	};
</script>

<style scoped lang="scss">
	.body {
		width: 100%;
		height: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		padding-bottom: 12.5rem;

		.header {
			width: 100%;
			height: 240px;
			background: url("~@/assets/homeimg/学习日历背景.png") no-repeat;
			background-size: 100% 100%;
			// padding-top: 20px;

			.top {
				// font-weight: bold;
				width: 100%;
				height: 2.75rem;
				line-height: 2.75rem;
				position: relative;
				color: #333333;
				font-size: 1.1875rem;
				span {
					font-weight: bold;
					margin-left: 3.125rem;
				}

				img {
					width: 0.625rem;
					height: 1.125rem;
					position: absolute;
					left: 1rem;
					bottom: 1rem;
				}
			}

			// 在scss文件中
			@supports(bottom:constant(safe-area-inset-top)) {

				// 如果存在底部安全区域
				.top {
					padding-top: constant(safe-area-inset-top);

				}

			}

			@supports(bottom:env(safe-area-inset-top)) {

				// 如果存在底部安全区域
				.top {
					padding-top: env(safe-area-inset-top);

				}

			}

			.myport {
				display: flex;
				justify-content: space-between;
				width: 92%;
				margin: 0 auto;
				margin-top: 0.625rem;

				.port-left {
					.tit {
						font-size: 1.3125rem;
						font-family: PingFang SC;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						line-height: 2.1875rem;
					}

					.num {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 1.3125rem;
					}
				}

				.port-right {
					width: 4.375rem;
					height: 4.375rem;
					border-radius: 50%;
					margin-right: 1.25rem;
					// margin-top: -0.625rem;

					.avator {
						width: 100%;
						height: 100%;
						border-radius: 50px;
					}
				}
			}

			.card {
				width: 93vw;
				height: 11.125rem;
				margin: 0 auto;
				background: #ffffff;
				border-radius: 0.3125rem;
				margin-top: 0.625rem;

				.card-c {
					width: 90vw;
					height: 100%;
					margin: 0 auto;

					.kc {
						width: 100%;
						height: 2.6875rem;
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #dcdcdc;

						.kc-t {
							font-size: 0.75rem;
							font-family: PingFang SC;
							font-weight: bold;
							color: rgba(153, 153, 153, 1);
							line-height: 3rem;
						}

						.title {
							font-size: 0.9375rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
							line-height: 2.8125rem;
						}
					}

					.dtclock {
						width: 100%;
						height: 4.125rem;
						margin-top: 0.5rem;
						border-radius: 0.3125rem;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.xxts:nth-of-type(1) {
							border-right: 0.125rem solid #dcdcdc;
						}

						.xxts {
							display: flex;
							align-items: center;
							width: 48%;
							height: 2.5rem;

							span:nth-of-type(1) {
								margin: 0 0.3125rem;
								// margin-top: -0.5rem;
								font-size: 1.5rem;
								color: #ffb107;
							}

							span:nth-of-type(2) {
								font-size: 0.75rem;
								color: #666666;
							}

							img {
								width: 2.5rem;
								height: 2.5rem;
								line-height: 2.5rem;
								margin-left: 1.125rem;
							}
						}
					}
				}
			}

			.task {
				width: 93vw;
				height: 21.625rem;
				margin: 0 auto;
				margin-top: 1.25rem;
				border-radius: 0.3125rem;
				background: #ffffff;

				.task-text {
					width: 100%;
					height: 4.25rem;
					text-align: center;

					p:nth-of-type(1) {
						display: block;
						font-size: 0.9375rem;
						// font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 2.1875rem;
						padding-top: 0.3125rem;
					}

					p:nth-of-type(2) {
						font-size: 0.75rem;
						// font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 0.625rem;
					}
				}

				.echart {
					width: 100%;
					height: 17.3125rem;
					background: url('~@/assets/homeimg/雷达分析图.png') no-repeat;
					background-size: 100% 100%;
				}
			}

			.all {
				display: block;
				text-align: center;
				font-size: 0.75rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 1.3125rem;
				margin-top: 4.375rem;
			}

			.btn {
				width: 90vw;
				height: 2.25rem;
				margin: 0 auto .9375rem;
				margin-top: .625rem;
				background: linear-gradient(90deg,
					rgba(255, 209, 66, 1) 0%,
					rgba(255, 175, 5, 1) 100%);
				border-radius: 1.125rem;
				font-size: 1.125rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 2.25rem;
				text-align: center;
			}
		}
	}
</style>
